<template>
  <div class="wrapper">
     <el-form  status-icon class="demo-ruleForm">
      <h2>加入我们</h2>

      <el-form-item  style="width: 60vw;">
        <el-input type="text"  autocomplete="off" placeholder="用户名" v-model="registerInfo.username" >
          <i slot="suffix" class="el-input__icon el-icon-circle-close" style="color:red" v-show="!formFlag.username"></i>
        </el-input>
      </el-form-item>
      
      <el-form-item  style="width: 60vw;" >
        <el-input type="password" placeholder="密码" v-model="registerInfo.password" show-password>
          <i slot="suffix" class="el-input__icon el-icon-circle-close" style="color:red" v-show="!formFlag.password"></i>
        </el-input>
      </el-form-item>
      
      <el-form-item  style="width: 60vw;">
        <el-input type="email"  autocomplete="off" placeholder="邮箱" v-model="registerInfo.email">
          <i slot="suffix" class="el-input__icon el-icon-circle-close" style="color:red" v-show="!formFlag.email"></i>
        </el-input>
      </el-form-item>
      
      <el-form-item  style="width: 60vw;">
        <el-input type="text"  autocomplete="off" placeholder="验证码" style="width: 30vw;margin:0 2vw 0 0;" v-model="registerInfo.code">
          <i slot="suffix" class="el-input__icon el-icon-circle-close" style="color:red" v-show="!formFlag.code"></i>
        </el-input>
        <el-button type="primary" style="width: 28vw;" @click="sendVerification">发送验证码</el-button>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" id="submit" @click="register">注册</el-button>
      </el-form-item>
    </el-form>  
  </div>
</template>

<script>
import RE from '@/tools/RE'
  export default {
    name: 'login',
    components:{},
    props:{},
    data(){
      return {
          registerInfo: {
            username: '',
            password: '',
            email: '',
            code: ''
          },
          formFlag: {
            username: false,
            password: false,
            email: false,
            code: false
          }
      }
    },
    created(){},
    mounted(){
      // let reqData = JSON.stringify(
      // this.test()
    },
    activated(){},
    updated(){},
    methods:{
      sendVerification () {
        this.$axios.get('/back/user/auth/verify', {
          params: {
            "email": this.registerInfo.email
          }
        }).then((res) => {
          console.log(res.data)
          this.$message({
            message: '验证码已经发送至您的邮箱',
            type: 'success'
          })
        }).catch((err) => {
          console.warn(err)
          this.$message.error('验证码发送失败，请检查网络连接')
        })
      },
      register () {
        if (!(this.formFlag.username)) {
          this.$message({
              message: '用户名必须以字母开头,仅包含字母和数字且长度为6-11位',
              type: 'error'
          })
          return
        } 
        if (!(this.formFlag.password)) {
          this.$message({
              message: '密码必须仅包含数字和字母，且长度为6-20位',
              type: 'error'
          })
          return
        } 
        if (!(this.formFlag.email)) {
          this.$message({
              message: '邮箱格式无效',
              type: 'error'
          })
          return
        } 
        if (!(this.formFlag.code)) {
          this.$message({
              message: '验证码长度为8位',
              type: 'error'
          })
          return
        } 
          
        
        this.$axios.post('/back/user/auth/register', {
          "email": this.registerInfo.email,
          "password": this.registerInfo.password,
          "username": this.registerInfo.username,
          "code": this.registerInfo.code
        }).then((res) => {
          if (res.data.code != 200) {
            this.$message.error('注册失败，邮箱 或 用户名 已被占用')
          } else {
            this.$message({
                message: '注册成功',
                type: 'success'
            })
            // this.$router.replace('/mine')
          }
        }).catch((err) => {
            console.warn (err)
            this.$message.error('注册失败，请检查网络连接')
        })
      }
    },
    computed:{},
    watch:{
      registerInfo: {
        
        handler (newValue, oldValue) {
          this.formFlag.username = RE.usernameCheck(newValue.username)
          this.formFlag.password = RE.passwordCheck(newValue.password)
          this.formFlag.email = RE.emailCheck(newValue.email)
          this.formFlag.code = RE.verificationCheck(newValue.code)          
        },
        deep: true,
        imediate: true        
      } 
      
    },
  }
</script>
<style scoped>
  .wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;    
  }
  #submit {
    width: 40vw;
  }
  h2 {
    color: #fff;
    font-size: 2em;
    margin: 1rem 0;
  }
</style>